<nz-modal
  [(nzVisible)]="isAppModalVisible"
  [nzTitle]="modalTitle"
  [nzWidth]="1000"
  [nzFooter]="null"
  [nzMaskClosable]="false"
  (nzOnCancel)="handleCancel()"
>
  <ng-container *nzModalContent>
    <div class="common-search-wrap">
      <div class="common-search-forms">
        <div class="common-form-item">
          <label class="common-search-label">游戏</label>
          <div class="common-search-conrol">
            <input nz-input placeholder="请输入游戏名称或ID" [(ngModel)]="searchParams.name">
          </div>
        </div>

        <div class="common-form-item">
          <div class="common-search-conrol">
            <button
              nz-button
              nzType="primary"
              class="m-r-10"
              (click)="queryTableData()"
            >查询</button>

            <button
              nz-button
              nzType="default"
              class="m-r-10"
              (click)="resetTableData()"
            >重置</button>

            <button
              nz-button
              nzType="primary"
              class="mbtn-green"
              (click)="submitSelected()"
            >{{ modalTitle }}已选游戏 {{ setOfCheckedId.size }}</button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-t-15">
      <nz-table
        #modalAppTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.loading"
        [nzData]="tableParams.tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
        (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
      >
        <thead>
          <tr>
            <th
              [(nzChecked)]="checked"
              [nzIndeterminate]="indeterminate"
              (nzCheckedChange)="onAllChecked($event)"
            ></th>
            <th nzAlign="center">ID</th>
            <th nzAlign="center">名称</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of modalAppTable.data; let index = index;">
            <td
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)"
            ></td>
            <!-- ID -->
            <td nzAlign="center">{{ data.id }}</td>
            <!-- 名称 -->
            <td nzAlign="center">{{ data.name || '-' }}</td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
  </ng-container>
</nz-modal>